<template>
  <div class="mb-4">
    <!-- 标题 -->
    <h2
      class="my-4"
      :style="{
        fontSize: `${titleSize}px`,
        fontWeight: titleWeight,
        fontStyle: titleItatic ? 'italic' : 'normal',
        color: titleColor,
      }"
    >
      <span class="mx-1">{{ serialNum }}.</span>
      <span class="mx-1">{{ title }}</span>
    </h2>
    <!-- 描述 -->
    <div
      class="indent-2"
      :style="{
        fontSize: `${descSize}px`,
        fontWeight: descWeight,
        fontStyle: descItatic ? 'italic' : 'normal',
        color: descColor,
      }"
    >
      {{ desc }}
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps<{
    title: string;
    desc: string;
    serialNum: number;
    titleSize: string;
    titleWeight: string;
    titleItatic: number;
    titleColor: string;
    descSize: string;
    descWeight: string;
    descItatic: number;
    descColor: string;
  }>();

// console.log(props);
</script>
